import { messages } from "share/common";
import React, { Component } from "react";
import { Form, Row, Col, Button } from "antd";
import AdvancedSearchFormItem from "components/advanced-search/advanced-search-form-item";
import Space from "components/space";
import { formatValue } from "components/advanced-search/utils";

@Form.create()
class DepartmentUI extends Component {
  componentDidMount() {
    const { onRef } = this.props;
    onRef && onRef(this);
    this.handleSearch(true);
  }

  clearSearch = () => {
    const { form } = this.props;
    form.resetFields();
    this.handleSearch(false);
  };

  handleSearch = (init) => {
    const { form, onSearch, searchForm } = this.props;
    form.validateFields((error, values) => {
      if (!error) {
        let target = formatValue(values, searchForm);
        onSearch && onSearch(target, values, init);
      }
    });
  };

  render() {
    const { searchForm, form } = this.props;
    return (
      <Form
        onSubmit={(e) => {
          e.preventDefault();
          this.handleSearch(false);
        }}
      >
        <Row gutter={20}>
          {searchForm.map((item) => (
            <Col span={6}>
              <AdvancedSearchFormItem form={form} field={item} />
            </Col>
          ))}
          <Col span={6} style={{ minHeight: "61px" }}>
            <Space style={{ position: "absolute", bottom: 0 }}>
              <Button type={"primary"} key={"search"} htmlType={"submit"}>
                {messages("common.search") /*搜索*/}
              </Button>
              <Button onClick={this.clearSearch}>{messages("common.reset") /*重置*/}</Button>
            </Space>
          </Col>
        </Row>
      </Form>
    );
  }
}

export default DepartmentUI;
